<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
		<meta name="misapplication-tap-highlight" content="no"/>
		<meta name="HandheldFriendly" content="true"/>
		<meta name="renderer" content="webkit">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-title" content=""/>
		<meta name="full-screen" content="yes">
		<meta name="x5-fullscreen" content="true">
<title>滚动字</title>
<link href="layui/css/layui.css" rel="stylesheet">
<script src="layui/layui.js"></script>
<script src="jquery-3.5.1.min.js"></script>
<style>

</style>

</head>
<body>
<div class="ledmianbody layui-col-xs12">
	<div class="direction">
		这是滚动区域<br/>2222
	</div>
</div>
<div style="margin-top:220px">
<div class="clickon" data-direction="right">从右向左</div>
<div class="clickon" data-direction="left">从左向右</div>
<div class="clickon" data-direction="bottom">从上向下</div>
<div class="clickon" data-direction="top">从下向上</div>
<div class="clickon" data-direction="play">播放</div>
<div class="clickon" data-direction="pause">暂停</div>
<div class="clickon" data-direction="stop">停止</div>
</div>
<style>
	.ledmianbody{position: fixed;top:0;border: 1px solid #000;height: 200px;overflow: hidden;}
</style>
<script src="fishroll.js"></script>
<script>
	
	var g1=new rolling({
		id:'.ledmianbody',
		direction:'top',
		play:true
	})
	g1.init();
	$(".clickon").on('click',function(){
		var direction=$(this).data('direction');
		if(direction=="right" || direction=="left" || direction=="bottom" || direction=="top"){
			g1.opt.direction=direction;
		}
		if(direction=="play"){
			g1.play();
		}
		if(direction=="stop"){
			g1.stop();
		}
		if(direction=="pause"){
			g1.pause();
		}
	})
</script>
</body>
</html>
